<div class="question">
    <div class="row short q-title" ng-click="toggleQuestion($index)">
        <div class="col-sm-10">
            <span
              class="glyphicon glyphicon-chevron-down"
              ng-if="!q.active"
              aria-hidden="true">
            </span>
            <span
              class="glyphicon glyphicon-chevron-up"
              ng-if="q.active"
              aria-hidden="true">
            </span>
            {{ q.title|truncate:200 }}
        </div>
        <div class="col-sm-2 text-right buttons">
            <i ng-click="delQuestion($index)" class="fa fa-times fa-sw" ng-if="electionEditable()"></i>
        </div>
    </div>

    <!-- question form -->
    <form class="row form form-horizontal qform" role="form" name="qform{{$index}}" ng-if="q.active">
        <div class="col-xs-12">

            <!-- title -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="title" ng-i18next="avAdmin.basic.title.label"></label>
                <div class="col-sm-10">
                    <input
                      id="title"
                      class="form-control"
                      type="text"
                      ng-disabled="!electionEditable()"
                      ng-i18next="[placeholder]avAdmin.basic.title.placeholder"
                      ng-model="q.title"/>
                </div>
            </div>

            <!-- description -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="desc" ng-i18next="avAdmin.basic.description.label"></label>
                <div class="col-sm-10">
                    <textarea
                    id="desc"
                    class="form-control"
                    ng-disabled="!electionEditable()"
                    ng-i18next="[placeholder]avAdmin.basic.description.placeholder"
                    ng-model="q.description">
                    </textarea>
                </div>
            </div>

            <!-- voting system -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="voting" ng-i18next>avAdmin.questions.votingSystem</label>
                <div class="col-sm-10">
                    <div class="radio" ng-repeat="o in vsystems">
                        <label>
                            <input
                              type="radio"
                              name="voting"
                              value="{{ o }}"
                              ng-disabled="!electionEditable()"
                              ng-model="q.tally_type"/>
                            <span ng-i18next="avAdmin.questions.votings.{{ o }}"></span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- number of winners -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="winners" ng-i18next>avAdmin.questions.winners.label</label>
                <div class="col-sm-10">
                    <p class="text-muted" ng-i18next>avAdmin.questions.winners.placeholder</p>
                    <div class="input-group col-xs-2">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="incOpt($index, 'num_winners', -1)">
                            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                        </button>
                      </span>
                      <input
                        type="text"
                        name="num_winners"
                        min=1 step=1
                        class="form-control"
                        ng-disabled="!electionEditable()"
                        ng-model="q.num_winners"
                        ui-keypress="{
                          37: 'incOpt($index, \'num_winners\', -1, $event)',
                          38: 'incOpt($index, \'num_winners\', 1, $event)',
                          39: 'incOpt($index, \'num_winners\', 1, $event)',
                          40: 'incOpt($index, \'num_winners\', -1, $event)'
                        }"
                        ui-validate="{
                          numoptions: 'validateMaxNumOptions($value)',
                          'min': '$value >= 1'}"
                        ui-validate-watch="'q.answers.length'"
                        required/>
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="incOpt($index, 'num_winners', 1)">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        </button>
                      </span>
                    </div>
                    <div class="col-xs-10 input-error">
                      <span
                        class="error text-brand-danger"
                        ng-show="!!qform{{$index}}.num_winners.$error.numoptions"
                        ng-i18next>
                        [i18next]({winners: q.num_winners, cands: q.answers.length})avAdmin.questions.winners.numOptionsError
                      </span>
                      <span
                        class="error text-brand-danger"
                        ng-show="!!qform{{$index}}.num_winners.$error.min"
                        ng-i18next>
                        avAdmin.questions.winners.minError
                      </span>
                    </div>
                </div>
            </div>

            <!-- Minimum -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="winners" ng-i18next>avAdmin.questions.min.label</label>
                <div class="col-sm-10">
                    <p class="text-muted" ng-i18next> avAdmin.questions.min.placeholder </p>
                    <div class="input-group col-xs-2">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="incOpt($index, 'min', -1)">
                            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                        </button>
                      </span>
                      <input
                        type="text"
                        name="min"
                        min=0
                        step=1
                        class="form-control"
                        ng-model="q.min"
                        ui-keypress="{
                          37: 'incOpt($index, \'min\', -1, $event)',
                          38: 'incOpt($index, \'min\', 1, $event)',
                          39: 'incOpt($index, \'min\', 1, $event)',
                          40: 'incOpt($index, \'min\', -1, $event)'
                        }"
                        ui-validate="{
                          numoptions: 'validateMinMax($value)',
                          'min': '$value >= 0'}"
                        ui-validate-watch="'q.max'"
                        ng-disabled="!electionEditable()"
                        required/>
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="incOpt($index, 'min', 1)">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        </button>
                      </span>
                    </div>
                    <div class="col-xs-10 input-error">
                      <span
                        class="error text-brand-danger"
                        ng-show="!!qform{{$index}}.min.$error.numoptions"
                        ng-i18next>
                        [i18next]({min: q.min, max: q.max})avAdmin.questions.min.maxError
                      </span>
                      <span
                        class="error text-brand-danger"
                        ng-show="!!qform{{$index}}.min.$error.min"
                        ng-i18next>
                        avAdmin.questions.min.minError
                      </span>
                    </div>
                </div>
            </div>

            <!-- Maximum -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="winners" ng-i18next>avAdmin.questions.max.label</label>
                <div class="col-sm-10">
                    <p class="text-muted" ng-i18next> avAdmin.questions.max.placeholder </p>
                    <div class="input-group col-xs-2">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="incOpt($index, 'max', -1)">
                            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                        </button>
                      </span>
                      <input
                        type="text"
                        id="max"
                        name="max"
                        min=0
                        step=1
                        class="form-control"
                        ng-disabled="!electionEditable()"
                        ui-keypress="{
                          37: 'incOpt($index, \'max\', -1, $event)',
                          38: 'incOpt($index, \'max\', 1, $event)',
                          39: 'incOpt($index, \'max\', 1, $event)',
                          40: 'incOpt($index, \'max\', -1, $event)'
                        }"
                        ui-validate="{
                          numoptions: 'validateMaxNumOptions($value)',
                          min: '$value >= 1'}"
                        ui-validate-watch="'q.answers.length'"
                        ng-model="q.max"
                        required/>
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="incOpt($index, 'max', 1)">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        </button>
                      </span>
                    </div>
                    <div class="col-xs-10 input-error">
                      <span
                        class="error text-brand-danger"
                        ng-show="!!qform{{$index}}.max.$error.numoptions"
                        ng-i18next>
                        [i18next]({max: q.max, cands: q.answers.length})avAdmin.questions.max.numOptionsError
                      </span>
                      <span
                        class="error text-brand-danger"
                        ng-show="!!qform{{$index}}.max.$error.min"
                        ng-i18next>
                        [i18next]avAdmin.questions.max.minError
                      </span>
                    </div>
                </div>
            </div>

            <!-- Randomize -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="random" ng-i18next>avAdmin.questions.random.label</label>
                <div class="col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input
                              type="checkbox"
                              id="random"
                              name="random"
                              value="false"
                              ng-disabled="!electionEditable()"
                              ng-model="q.randomize_answer_order"/>
                            <span ng-i18next>avAdmin.questions.random.placeholder</span>
                        </label>
                    </div>
                </div>
            </div>

        <!-- layout -->
        <div class="form-group">
            <label class="col-sm-2 control-label" for="layout" ng-i18next="avAdmin.questions.layout.label"></label>
            <div class="col-sm-10">
                <p class="text-muted" ng-i18next>
                    avAdmin.questions.layout.placeholder
                </p>
                <div class="radio" ng-repeat="o in layouts">
                    <label>
                        <input
                          type="radio"
                          name="layout"
                          ng-disabled="!electionEditable()"
                          value="{{ o }}"
                          ng-model="q.layout"/>
                        <span ng-i18next="avAdmin.questions.layout.{{ o }}"></span>
                    </label>
                </div>
            </div>
        </div>


            <!-- Candidates -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="candidates" ng-i18next>avAdmin.questions.candidates.label</label>
                <div class="col-sm-10">
                    <p class="text-muted">
                        <span ng-i18next>
                          avAdmin.questions.candidates.placeholder
                        </span>
                        <span
                          class="text-brand-danger"
                          ng-show="q.answers.length === 0"
                          ng-i18next>
                          avAdmin.questions.candidates.minError
                        </span>
                    </p>

                    <div class="col-sm-12">

                        <div ng-switch="q.layout">
                          <div
                            dnd-list="q.answers"
                            ng-switch-when="simple"
                            dnd-drop="recalculateAnswerIds(item, index)">
                            <div
                              ng-repeat="answer in q.answers">
                              <div
                                dnd-draggable="answer"
                                dnd-moved="q.answers.splice($index, 1)"
                                dnd-effect-allowed="move"
                                dnd-disable-if="!electionEditable()"
                                ng-class="{editable: electionEditable()}"
                                av-question-option-simple>
                              </div>
                            </div>
                          </div>
                          <div
                            dnd-list="q.answers"
                            ng-switch-default
                            dnd-drop="recalculateAnswerIds(item, index)">
                            <div
                              ng-repeat="answer in q.answers">
                              <div
                                dnd-draggable="answer"
                                dnd-moved="q.answers.splice($index, 1)"
                                dnd-effect-allowed="move"
                                dnd-disable-if="!electionEditable()"
                                ng-class="{editable: electionEditable()}"
                                av-question-option-details>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="row" ng-if="electionEditable()">
                            <div class="col-sm-12 newopt">
                                <div class="input-group">
                                  <input type="text" id="newopt" class="form-control" ng-enter="addOption($index)" ng-i18next="[placeholder]avAdmin.questions.newopt"/>
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" ng-click="addOption($index)">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                    </button>
                                  </span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- endof candidates -->

        </div>
    </form>
</div>
